<template>
  <div class="contianer">
    <el-row class="mian-container">
      <el-col :md="17" :lg="17" class="flex_box">
        <topBox />
        <el-row class="left_box ">
          <div class="chart-main-container">
            <div style="display: flex;flex-direction: column;width: 58%;margin-top: 25px;padding-right: 3px;">
              <el-select v-model="timeValue" placeholder="请选择" @change="changeTimeValue" style="align-self: flex-end">
                <el-option
                    v-for="item in timeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
               </el-select>
              <div ref="chart-main" style=" width: 80%; height:80%;padding-left:20px" />
              </div>
            <deskChart class="hidden-md-and-down" />
          </div>
        </el-row>
      </el-col>
      <el-col :md="6" :lg="6" class="right_box hidden-md-and-down">
        <Message />
      </el-col>
    </el-row>
    <el-row class="dashboard-container">

      <el-col :sm="24" :md="12" class="chart-cpu-container">
        <el-select v-model="value" placeholder="请选择主机" @change="changeValue" style="align-self: flex-end">
        <el-option
          v-for="item in cupOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
        </el-select>
        <el-select v-model="value1" placeholder="请选择时间" @change="changeValue9" style="align-self: flex-end">
          <el-option
            v-for="item in cupOptions1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <cupChart :ip="value" :time="value1"/>
      </el-col>

      <el-col :sm="24" :md="11" class="chart-gpu-container">
        <el-select v-model="memValue" placeholder="请选择" @change="changeValue1" style="align-self: flex-end">
        <el-option
          v-for="item in memOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
        </el-select>
        <el-select v-model="memValue1" placeholder="请选择" @change="changeValue7" style="align-self: flex-end">
          <el-option
            v-for="item in memOptions2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <memChart :ip="memValue" :time="memValue1"/>
      </el-col>
    </el-row>
    <!-- <el-row class="netio-container">
      <netioChart />
    </el-row> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Message from './components/Message/index.vue'
import topBox from './components/topBox/index.vue'
import cupChart from './components/cupChart/index.vue'
import memChart from './components/memChart/index.vue'
import deskChart from './components/deskChart/index.vue'

// import netioChart from './components/netioChart/index.vue'
import { getSystem } from '@/api/system'
import { getTwentyFour } from '@/api/system'
export default {
  name: 'Dashboard',
  components: {
    Message, topBox, cupChart, memChart, deskChart
  },
  data() {
    return {
      cputype1: 0,
      cputype2: 0,
      cputype3: 0,
      cputype4: 0,
      // 主数据
      mainData: {
        seriesData: [
          { value: 0, name: 'CPU<1%' },
          { value: 0, name: 'CPU>=1且<3%' },
          { value: 0, name: 'CPU>=3%且<10%' },
          { value: 0, name: 'CPU>10%' }
        ]
      },
      value: 'win000k10502',
      value1: '',
      cupOptions: [],
      cupOptions1: [
        { label: '一天', value: 'hour' },
        { label: '一周', value: 'day' }
      ],
      memOptions2: [
        { label: '一天', value: 'hour' },
        { label: '一周', value: 'day' }
      ],
      memOptions: [],
      timeOptions: [],
      memValue: 'win000k10502',
      memValue1: '',
      newIp: 'win000k10502',
      timeValue: 'win000k10502'
    }
  },
  watch: {
    timeValue(newVal) {
      this.updateChart(newVal)
      this.getTwentyFour()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    updateChart(ip) {
      this.newIp = ip
    },
    changeValue(v) {
      this.value = v
    },
    changeValue1(v) {
      this.memValue = v
    },
    changeValue7(v) {
      this.memValue1 = v
    },
    changeValue9(v) {
      this.value1 = v
    },
    changeTimeValue(v) {
      this.timeValue = v
    },
    async init() {
      await this.getSystem()
      await this.getTwentyFour()
    },
    async getSystem() {
      const res = await getSystem()
      for (let i = 0; i < res.length; i++) {
        if (res[i].cpuPer < 1) {
          this.cputype1++
        } else if (res[i].cpuPer >= 1 && res[i].cpuPer < 2) {
          this.cputype2++
        } else if (res[i].cpuPer >= 2 && res[i].cpuPer < 10) {
          this.cputype3++
        } else if (res[i].cpuPer > 10) {
          this.cputype4++
        }
      }
      // this.mainData.seriesData[0].value = this.cputype1
      // this.mainData.seriesData[1].value = this.cputype2
      // this.mainData.seriesData[2].value = this.cputype3
      // this.mainData.seriesData[3].value = this.cputype4
      console.log(this.mainData.seriesData[0].value)
      // cup条件
      for (let i = 0; i < res.length; i++) {
        this.cupOptions.push({
          value: res[i].hostname,
          label: res[i].hostname
        })
      }
      // this.value = this.cupOptions[0].value
      // mem条件
      for (let i = 0; i < res.length; i++) {
        this.memOptions.push({
          value: res[i].hostname,
          label: res[i].hostname
        })
      }
      // 24 cpu条件
      for (let i = 0; i < res.length; i++) {
        this.timeOptions.push({
          value: res[i].hostname,
          label: res[i].hostname
        })
      }
      // this.memValue = this.memOptions[0].value
    },
    // 24h cpu
    async getTwentyFour() {
      const res = await getTwentyFour(this.newIp)
      console.log('24h', res)
      this.mainData.seriesData[0].value = res.one
      this.mainData.seriesData[1].value = res.three
      this.mainData.seriesData[2].value = res.ten
      this.mainData.seriesData[3].value = res.oneHundred
      await this.createChatMain()
    },
    /**
   * 主图表
   */
    createChatMain() {
      var myChart = echarts.init(this.$refs['chart-main'])
      var option = {
        title: {
          text: '主机过去24小时cpu使用率占比'
        },
        // tooltip: {
        //   trigger: 'item'
        // },
        legend: {
          bottom: '0%',
          left: 'center'
        },
        series: [
          {
            name: '过去24小时cpu使用率占比',
            type: 'pie',
            radius: '50%',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 3,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside'
            },
            labelLine: {
              show: true // 显示标签的连接线
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: this.mainData.seriesData
          }
        ]
      }
      myChart.setOption(option)
    }

  }
}
</script>

<style lang="scss" scoped>
.flex_box{
  height: 100%;
}
.contianer {
  background-color:#F7F7F7 ;
  padding-top: 14px;
  .mian-container{
    // height: 600px;
    display: flex;
    justify-content: space-around;
    .left_box{
      margin-top: 18px;
      height: 80%;
      background-color: white;
      border-radius: 20px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      .chart-main-container{
      width: 100%;
      height: 500px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      }
    }
    .right_box{
      height: 100%;
      background-color: white;
      border-radius: 20px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    }
  }
  .dashboard-container {
    display: flex;
    justify-content: space-around;
    padding-top: 16px;
    flex-wrap: wrap;
    .chart-cpu-container {
      // width: 48%;
      height: 400px;
      background-color: white;
      border-radius: 20px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .chart-gpu-container {
      // width: 48%;
      height: 400px;
      background-color: white;
      border-radius: 20px;
      border: 1px solid #e0e0e0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .netio-container{
      display: flex;
      justify-content: center;
  }
}
</style>
